<!--
 * @Description: 表格组件
 * @Author:
 * @Github:
 * @Date:
 * @LastEditors  : 
 * @LastEditTime : 
 -->
<template>
  <div class="table-container">
    <!-- 条件搜索 -->
    <el-row class="table-top-button-group" v-if="!noSearch">
      <el-col :span="24">
        <slot name="searchCondition"></slot>
      </el-col>
    </el-row>

    <!-- 过滤数据 -->
    <!-- <div class="searchWord">
      <el-form>
        <el-form-item label="搜索：">
          <el-input
            v-model="search"
            style="display: inline-block"
            placeholder="请输入搜索内容"
          >
          </el-input>
        </el-form-item>
      </el-form>
    </div> -->

    <!-- 表格内容 -->
    <div class="table-list-container" :class="{ 'no-page': noPage }">
      <el-table
        :data="tabelData"
        :height="customTableHeight || '100%'"
        :highlight-current-row="highlight"
        stripe
        :show-header="!noTableHearder"
        :row-class-name="tableRowClassName"
        @selection-change="selectionChange"
        @row-click="rowClick"
        @row-dblclick="rowdblclick"
        style="width: 100%"
        ref="my_table"
      >
        <el-table-column
          type="selection"
          width="55"
          v-if="!noSelectBox"
        ></el-table-column>
        <el-table-column
          type="index"
          label="序号"
          v-if="!noIndex"
          align="center"
          :resizable="false"
          :index="indexMethod"
          width="55px"
        ></el-table-column>
        <slot name="table-column"></slot>
      </el-table>
    </div>

    <!-- 分页 -->
    <el-row class="pagination-container" v-if="!noPage">
      <el-col :span="24">
        <el-pagination
          :current-page.sync="tableData.pageNum"
          :disabled="disabled()"
          class="pagination-position"
          :page-size="tableData.pageSize"
          layout="total, prev, pager, next, jumper"
          :total="tableData.total"
        ></el-pagination>
      </el-col>
    </el-row>

    <!-- 底部操作 -->
    <el-row class="table-bottom-button-group" v-if="!noBottom">
      <el-col :span="24">
        <slot name="bottomCondition">
          <span>请添加bottomCondition功能或Table传递noBottom</span>
        </slot>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  props: {
    // 复选框
    noSelectBox: {
      default: false,
    },
    // 条件区
    noSearch: {
      type: Boolean,
      default: false,
    },
    // 是否显示表头
    noTableHearder: {
      type: Boolean,
      default: false,
    },
    // 分页
    noPage: {
      type: Boolean,
      default: false,
    },
    // 底部按钮
    noBottom: {
      type: Boolean,
      default: true,
    },
    // 序号
    noIndex: {
      type: Boolean,
      default: false,
    },
    // 数据
    tableData: {
      type: Object,
      default: () => {
        return {
          list: [],
          pageNum: null,
          pageSize: 10,
          total: null,
        };
      },
    },
    // 表格整体高度
    customTableHeight: {
      default: 0,
      type: Number,
    },
    // 点击高亮当前行
    highlight: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      search: "",
    };
  },
  watch: {
    "tableData.pageNum"() {
      this.$emit("sizeChange");
    },
    "tableData.pageSize"() {
      this.$emit("sizeChange");
    },
  },
  methods: {
    // 设置间隔行背景色
    tableRowClassName({ row, rowIndex }) {
      return rowIndex % 2 == 0 ? "warning-row" : "success-row";
    },
    // 序号
    indexMethod(index) {
      return index + 1 + this.tableData.pageSize * (this.tableData.pageNum - 1);
    },
    // 行被单击
    rowClick(row, event, column) {
      // this.$emit("rowClick", row, event, column);
      this.$emit("input", row);
      this.$refs.my_table.toggleRowSelection(row);
    },
    // 行被双击
    rowdblclick(row, event, column) {
      this.$emit("input", row);
      alert(JSON.stringify(row));
    },
    // 勾选复选框触发
    selectionChange(val) {
      this.$emit("selectionChange", val);
    },
    disabled() {
      if (this.tableData.total) {
        if (this.tableData.total > this.tableData.pageSize) {
          return false;
        } else {
          return true;
        }
      } else {
        return true;
      }
    },
  },
  // 模糊搜索
  computed: {
    tabelData() {
      const search = this.search;
      if (search) {
        return this.tableData.list.filter((data) => {
          return Object.keys(data).some((key) => {
            return String(data[key]).toLowerCase().indexOf(search) > -1;
          });
        });
      }
      return this.tableData.list;
    },
  },
};
</script>
<style lang="scss">
.table-container {
  padding: 10px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: rgba($color: teal, $alpha: 0.2);
  border-radius: 16px;
  //搜素栏
  .table-top-button-group {
    .el-row {
      margin: 0 !important;
    }
  }
  //列表
  .table-list-container {
    flex: 1;
    overflow: auto;
    .el-table__header tr,
    .el-table__header th {
      padding: 0;
      height: 60px;
    }
    .el-table__body tr,
    .el-table__body td {
      padding: 0;
      height: 60px;
    }
    // .el-table--striped .el-table__body tr.el-table__row--striped.current-row td,
    // .el-table__body tr.current-row > td {
    //   background-color: #ffec8b;
    // }
    // .el-table tbody tr:hover > td {
    //   background-color: red !important;
    // }
    // .warning-row {
    //   background: darkseagreen;
    // }
    // .success-row {
    //   background: pink;
    // }
  }
  // 分页
  .pagination-container {
    text-align: right;
    background: #fbfcff;
    padding: 8px 6px;
    // border: 1px solid rgba(205, 221, 237, 1);
    // border-top: none;
  }
}
</style>
